import React, { Component } from 'react'
import { Table, Spin } from 'antd';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import _ from 'lodash'
import Debug from '../Debug';
import './index.css'

/**
 * @author jms
 * @description 列表
 * @date 2023-9-7
 * @version 1.3
 */
export default class DocumentList extends Component {

    //状态初始化
    state = {
        selectedRowKeys: [],
        selectedRows: [],
        current: 1,//当前页数
        pageSize: 10,//每一页的数据数
    }

    onSelectChange = async (selectedRowKeys, selectedRows) => {
        await new Promise(resolve => {
            this.setState({
                selectedRowKeys,
                selectedRows
            }, resolve)
        })
        if (this.props.onSelectChange) await this.props.onSelectChange(selectedRowKeys, selectedRows)
    }

    //重置回调
    reStart = async () => {
        const { pageSizeOptions, pageSize } = this.props
        await new Promise((resolve) => {
            this.setState({
                current: 1,
                pageSize: pageSizeOptions ? pageSizeOptions[0] : pageSize ? pageSize : 10,
            }, resolve)
        })
        await this.onSelectChange([], [])
    }

    //添加序号列
    addSerialNumber = (columns, data, title) => {
        const newColumns = [{ title: title ? title : '序号', dataIndex: 'serialNumber' }, ...columns]
        const newData = data.map((item, index) => {
            item.serialNumber = index + 1
            return item
        })
        return {
            newColumns, newData
        }
    }

    render() {
        /**
         * fieldName fieldMeans Type
         * columns 表头 Array
         * datavia 表数据 Array
         * serialNumber 开启序号 boolean
         * hideSelect 隐藏选择列 boolean
         * singer 是否为单选 boolean
         * bordered 是否有边框 boolean
         * loading 是否加载中 boolean
         * pageSize 每页数据条数 number
         * showTotal 展示数据总量 boolean
         * pageSizeOptions 每页显示多少条 number[] 优先级大于pageSize
         * gotoPage 开启页数跳转 boolean
         * actionClumns 对于列的操作函数 function(columns, data)
         * onSelectChange 选中变化时回调函数 function(selectedRowKeys, selectedRows)
         * rowKey 表格行 key 的取值，可以是字符串或一个函数 string | function(record): string
         * onPageChange 分页变化时的回调函数 function(page, pageSize)
         * totalNumber 数据总数
         */
        let { serialNumber, hideSelect, singer, bordered, loading, pageSize, showTotal, pageSizeOptions, gotoPage, actionColumns } = this.props
        //深克隆不要影响props造成多次列操作
        let columns = _.cloneDeep(this.props.columns)
        let data = _.cloneDeep(this.props.data)
        if (actionColumns && actionColumns !== null) {
            const { newColumns, newData } = actionColumns(columns, data)
            columns = newColumns
            data = newData
        }

        if (serialNumber) {
            const { newColumns, newData } = this.addSerialNumber(columns, data)
            columns = newColumns
            data = newData
        }

        return (
            <Debug name='DocumentList'>
                <div className='documentList-main'>
                    {
                        loading ?
                            <div className='top-center-loading'>
                                <Spin />
                            </div> : ''
                    }
                    <ConfigProvider locale={zh_CN}>
                        <Table
                            columns={columns ? columns : []}
                            dataSource={data ? data : []}
                            rowSelection={
                                hideSelect ? false :
                                    {
                                        type: singer ? 'radio' : 'checkbox',
                                        onChange: this.onSelectChange,
                                        selectedRowKeys: this.state.selectedRowKeys
                                    }
                            }
                            rowKey={this.props.rowKey}
                            bordered={bordered ? bordered : false}
                            pagination={{
                                defaultPageSize: pageSizeOptions ? pageSizeOptions[0] : pageSize ? pageSize : this.state.pageSize,
                                pageSize: this.state.pageSize,
                                total: this.props.totalNumber ? this.props.totalNumber : data.length,
                                showTotal: showTotal ? (total) => { return `数据总数 ${total} 条` } : false,
                                pageSizeOptions: pageSizeOptions ? pageSizeOptions : false,
                                showSizeChanger: pageSizeOptions ? true : false,
                                showQuickJumper: gotoPage ? gotoPage : false,
                                current: this.state.current,
                                onChange: async (page, pageSize) => {
                                    await new Promise(resolve => {
                                        this.setState({
                                            current: page,
                                            pageSize
                                        }, resolve)
                                    })
                                    if (this.props.onPageChange && typeof this.props.onPageChange === 'function') {
                                        await this.props.onPageChange(page, pageSize)
                                    }
                                }
                            }}
                        />
                    </ConfigProvider>
                </div>
            </Debug>
        )
    }
}
